<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		div{
			width: 120px;
			height: 120px;
			border-radius: 50%;
			text-align: center;
			line-height: 120px;
			cursor: pointer;
			color: white;
		}
		#box{
			width: 120px;
			height: 120px;
			margin: 0 auto;
			margin-top: 250px;
			position: relative;
		}
		#center{
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
			background-color: red;
			transition: all 2s ease;
		}
		#content{
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#content div{
			position: absolute;
			top: 0px;
			left: 0px;
		}
		.div1{
			background-color: orange;
		}
		.div2{
			background-color: yellow;
		}
		.div3{
			background-color: green;
		}
		.div4{
			background-color: blue;
		}
		.div5{
			background-color: plum;
		}
		.div6{
			background-color: black;
		}
		/*.div7{
			background-color: black;
		}
		.div8{
			background-color: black;
		}
		.div9{
			background-color: black;
		}*/
	</style>
	<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			var div = document.getElementsByClassName('div');
			var count = div.length
			var d = 360/count
			for (var i=1;i<count+1;i++) {
				var hudu = Math.PI/180*d*i
				var y = -Math.sin(hudu)*220
				var x = -Math.cos(hudu)*220
				var t = i-1
				div[t].style.transition = 'all 1s ease '+i*0.2+'s';
				div[t].style.transform = 'translate('+x+'px,'+y+'px) rotateY(1080deg)';
			}
			$('#center').click(function(){
				for (var i=0;i<count;i++) {
					div[i].style.transition = 'all 0.8s';
					div[i].style.transform = '';
				}
			})
		})
	</script>
	<body>
		<div id="box">
			<div id="center">陈嘉乐</div>
			<div id="content">
				<div class="div div1">CISCO</div>
				<div class="div div2">PHP</div>
				<div class="div div3">MYSQL</div>
				<div class="div div4">HTML5</div>
				<div class="div div5">JS</div>
				<div class="div div6">LINUX</div>
				<!--<div class="div div7">LINUX</div>
				<div class="div div8">LINUX</div>
				<div class="div div9">LINUX</div>-->
			</div>
		</div>
		
	</body>
</html>
